import React, { Component } from "react";
import reactDom from "react-dom";

export default class App extends Component {
  render() {
    return (
      <div>
        <Home></Home>
      </div>
    );
  }
}

class Modal extends Component {
  render() {
    // 这个东西的关键源码中的操作就是重新调用了一个React.render(#modal) 这样的操作。。
    return reactDom.createPortal(
      this.props.children,
      document.getElementById("modal")
    );
  }
}

class Home extends Component {
  render() {
    return (
      <div>
        <h2>Home</h2>
        <Modal>
          <h3>我是一个modal</h3>
        </Modal>
      </div>
    );
  }
}
